<script setup>
import { inject, ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { lowerList } from "@/services/team";
import { areaListApi } from "@/services/address";
import { userareaLower, lowerCount, rolledcount } from "@/services/team";
import { mine, userinfo } from "@/services/user";
import { des_phone } from "@/utils/desensitization";

userinfofun();

const level_id = ref("");
const area_level = ref("");

async function userinfofun() {
  let res = await userinfo();
  dltext.value = res.data.area_code_text;
}

onLoad((e) => {
  type.value = e.type || "501";
  // formdata.value.level_id = e.type || "501";
  formdata.value.type = 2;
  if (e.type == 501) {
    selecttow.value = 2;
  } else {
    selecttow.value = 1;
  }
  formdata.value.level =
    selecttow.value == 2 ? 3 : selecttow.value == 1 ? 2 : 1;

  getuserlist();
  // areaListFun();
});
//下拉触底
onReachBottom(() => {
  // getuserlist();
});
const formdata = ref({
  page: 1,
  limit: 10,
  keyword: "",
  level: "",
});
const type = ref("");
const list = ref([]);
const shownodate = ref(false);

const loading = ref(true);
const status = ref("more");

async function getuserlist() {
  loading.value = true;
  try {
    let res = await userareaLower(formdata.value);
    if (res.code == 200) {
      // list.value = res.data.list;
      list.value = res.data;
      shownodate.value = true;
      if (res.data.length < formdata.value.limit) {
        status.value = "no-more";
      } else {
        status.value = "more";
      }
      loading.value = false;
      if (res.data.length > 0) {
        formdata.value.page = formdata.value.page + 1;
      }
    }
  } catch (e) {
    console.log(e);
    uni.$u.toast(e.info);
  }
}

const keyword = ref("");
const search = () => {
  formdata.value.page = 1;
  getuserlist();
};

const date = ref(null);
// 日期选择器
const currentDate = getDate({
  format: true,
});

date.value = getDate({
  format: true,
});

const startDate = ref(null);
const endDate = ref(null);

startDate.value = getDate("start");
endDate.value = getDate({
  format: true,
});

function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  // let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year;
  }
  month = month > 9 ? month : "0" + month;
  // day = day > 9 ? day : '0' + day;
  return `${year}-${month}`;
}

const DateSwitching = (Data, formString, type) => {
  let newdate = "";
  if (type == 1) {
    newdate = Data.split(formString);

    return newdate[0] + "年";
  }
  if (type == 2) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月";
  }
  if (type == 3) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月" + newdate[2] + "日";
  }
};

// 地区
const columnstwo = ref([["省代", "市代", "区代"]]);
const showtwo = ref(false);
const dltext = ref("");
const selecttow = ref("");

const addresshow = ref(false);
const columns = ref([]);

const province = ref([]);
const city = ref([]);
const county = ref([]);
const addressdata = ref([]);
const fromdate = ref({ operating_area: {} });

// 获取地区数据
async function areaListFun() {
  //发送请求
  // let res = await areaListApi();
  // columns.value;
  // addressdata.value = res.data;
  // province.value = res.data;
  // city.value = res.data[0].sub;
  // county.value = res.data[0].sub[0].sub;
  // columns.value.push(province.value, city.value, county.value);
}

const showaddressfun = () => {
  columns.value = [];

  if (selecttow.value == 0) {
    columns.value.push(province.value);
  }
  if (selecttow.value == 1) {
    columns.value.push(province.value, city.value);
  }
  if (selecttow.value == 2) {
    columns.value.push(province.value, city.value, county.value);
  }
  addresshow.value = true;
};
const confirmaddress = (e) => {
  if (selecttow.value == 0) {
    fromdate.value.operating_area = {
      province: e.value[0].name,
      region: e.value[0].code,
    };
    dltext.value = e.value[0].name;
  }
  if (selecttow.value == 1) {
    fromdate.value.operating_area = {
      province: e.value[0].name,
      city: e.value[1].name,
      region: e.value[1].code,
    };
    dltext.value = e.value[0].name + "/" + e.value[1].name;
  }
  if (selecttow.value == 2) {
    fromdate.value.operating_area = {
      province: e.value[0].name,
      city: e.value[1].name,
      area: e.value[2].name,
      region: e.value[2].code,
    };
  }
  // fromdate.value
  dltext.value =
    e.value[0].name + "/" + e.value[1].name + "/" + e.value[2].name;

  addresshow.value = false;
};
const selectqdfun = () => {
  if (addressdata.value.length <= 0) {
    areaListFun();
  }

  showtwo.value = true;
};
const confirmdl = (e) => {
  selecttow.value = e.indexs[0];
  dltext.value = e.value[0];
  fromdate.value.operating_area = {};
  showtwo.value = false;
};
const canceladdress = () => {
  addresshow.value = false;
  showtwo.value = false;
};
const changeHandler = (e) => {
  const { columnIndex, value, values, index, indexs, code } = e;

  city.value = [];
  county.value = [];
  let lenghts = addressdata.value[indexs[0]].sub.length;
  if (
    addressdata.value &&
    addressdata.value[indexs[0]].sub &&
    !addressdata.value[indexs[0]].sub[indexs[1]]
  ) {
    city.value =
      addressdata.value &&
      addressdata.value[indexs[0]] &&
      addressdata.value[indexs[0]].sub;
    county.value =
      addressdata.value &&
      addressdata.value[indexs[0]] &&
      addressdata.value[indexs[0]].sub[lenghts - 1] &&
      addressdata.value[indexs[0]].sub[lenghts - 1].sub;
  } else {
    city.value =
      addressdata.value &&
      addressdata.value[indexs[0]] &&
      addressdata.value[indexs[0]].sub;
    county.value =
      addressdata.value &&
      addressdata.value[indexs[0]] &&
      addressdata.value[indexs[0]].sub[indexs[1]] &&
      addressdata.value[indexs[0]].sub[indexs[1]].sub;
  }
  columns.value = [];
  if (selecttow.value == 0) {
    columns.value.push(province.value);
  }
  if (selecttow.value == 1) {
    columns.value.push(province.value, city.value);
  }
  if (selecttow.value == 2) {
    columns.value.push(province.value, city.value, county.value);
  }
  // columns.value.push(province.value, city.value, county.value);
};

const goOpen = () => {
  uni.navigateTo({
    url: "/pages/team/shopkeeper/quotaVoucher?type=" + 501,
  });
};
const callphone = (item) => {
  uni.makePhoneCall({
    phoneNumber: item.ot_phone,
  });
};
</script>

<template>
  <view class="regionalAgent">
    <view v-for="(val, key, i) in list" :key="key">
      <view class="top-title">{{ val[0].level_text }}</view>

      <view
        class="footer"
        v-for="(item, index) in val"
        :key="index"
        style="margin-bottom: 20rpx"
      >
        <view class="footer-content">
          <view class="footer-content-left">
            <view class="footer-content-name">{{
              item.region_text || "---"
            }}</view>
          </view>

          <view
            v-if="item.maskPhone"
            class="footer-content-item"
            @click="callphone(item.phone)"
            >上级代理手机：{{ item.maskPhone || "--" }}
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 5rpx"
              src="@/static/team/shopkeeper/phone-icon.png"
              mode="widthFix"
          /></view>

          <view style="width: 100rpx; height: 20rpx"> </view>

          <view class="footer-content-item"
            >代理等级：{{ item.level_text }}</view
          >
          <view class="footer-content-item" v-if="item.level == 4"
            >商铺名称：{{ item.shop_name || "--" }}</view
          >
        </view>
      </view>
      <uni-load-more color="#c6c5c3" :status="status" v-if="list.length > 0" />
    </view>
  </view>

  <view class="nodeta" v-if="!loading && list.length <= 0">
    <image src="@/static/nodate/datas.png" mode="widthFix" />
  </view>
  <!-- <view class="bt-footer">
    <view class="bt-wz">
      <u-button
        class="custom-style"
        @click="goOpen"
        text="为他人开通"
      ></u-button>
    </view>
  </view> -->
</template>

<style lang="scss" scoped>
@import "./regionalAgent.scss";
</style>
